import QueryList from '@/components/basicWidget/QueryList'
import { put } from '@/utils/requestUtil'
import { message } from 'antd'
import React, { Component } from 'react'

class InterfaceMonitor extends Component {

    constructor(props) {
        super(props)
        this.state = {
        }
    }

    async componentDidMount() { }

    actionColumns = (columns, data) => {
        data = data.map(item => {
            item.spendTime = item.spendTime + 'ms'
            const code = item.responseCode
            item.responseCode = (
                code === '200' ? <InterfaceMonitorSpan style={{ backgroundColor: '#52c41a' }}>成功</InterfaceMonitorSpan> :
                    code === '50001' ? <InterfaceMonitorSpan style={{ backgroundColor: '#faad14' }}>50001</InterfaceMonitorSpan> :
                        <InterfaceMonitorSpan style={{ backgroundColor: '#f5222d' }}>失败</InterfaceMonitorSpan>
            )
            const ip = item.ip
            item.ip = (
                <>{ip}<InterfaceMonitorSpan
                    style={{ backgroundColor: '#f5222d', float: 'right', cursor: 'pointer' }}
                    onClick={async () => {
                        const response = await put(`/auth/add/${ip}/blackList`)
                        if (response && response.code === 200) {
                            message.success('操作成功')
                        }
                    }}
                >封禁</InterfaceMonitorSpan></>
            )
            return item
        })
        return { newColumns: columns, newData: data }
    }

    render() {
        return (
            <QueryList
                queryCode='interfaceMonitor'
                actionColumns={this.actionColumns}
                ref={queryList => this.queryList = queryList}
            >
            </QueryList>
        )
    }
}


function InterfaceMonitorSpan(props) {
    return <span
        style={{
            color: 'white',
            padding: '5px 10px',
            borderRadius: '15px',
            whiteSpace: 'nowrap',
            ...props.style
        }}
        onClick={props.onClick}
    >{props.children}</span>
}
export default InterfaceMonitor
